<template>
  <div class="index-container">
    <div class="content-item">
      <div class="content-item-left">工单号：</div>
      <div class="content-item-right">{{no}}</div>
    </div>
    <div class="content-item">
      <div class="content-item-left">联系方式：</div>
      <div class="content-item-right">{{nomobile}}</div>
    </div>
    <div class="mail-title">快递信息：</div>
    <div class="content-info">
      <div class="content-info-item">
        <div class="content-info-item-left">姓名: {{postInfo.name}}</div>
        <div class="content-info-item-right" @click="copyInfo">
          <img src="../../../static/copy.png" alt="">
          复制
        </div>
      </div>
      <div class="content-info-item">
        <div class="content-info-item-left">联系电话: {{postInfo.mobile}}</div>
      </div>
      <div class="content-info-item">
        <div class="content-info-item-left">地址: {{postInfo.province}}{{postInfo.city}}{{postInfo.address}}</div>
      </div>
    </div>
    <div class="content-item">
      <van-field v-model="courier_no" label="快递单号：" placeholder="请输入快递单号" />

    </div>
    <div class="mail-title mailimg">上传快递单：</div>
    <upload :no="no" @uploadimg="uploadimg" @deleteimage="deleteimage"></upload>
    <div class="speedbtn" @click="confirmMail">提交</div>
  </div>
</template>
<script>
import Upload from "./upload";
import { getPostInfo, devicePost } from '@/api/home.js'
export default {
  components: {Upload},
  data() {
    return {
      no: '',
      nomobile: '',
      postInfo: {},
      courier_no: '',
      courier_img:''
    }
  },

  mounted() {
    this.no = this.$route.query.no
    this.nomobile = this.$route.query.mobile
    this.getMailInfo()
  },

  methods: {
    confirmMail() {
      if (!this.no) {
        this.$notify({ type: 'danger', message: '工单异常，请重新进入' })
        return
      }
      if (!this.courier_no) {
        this.$notify({ type: 'danger', message: '请输入快递单号' })
        return
      }
      if (!this.courier_img) {
        this.$notify({ type: 'danger', message: '请上传快递单' })
        return
      }
      let params = {
        repair_no: this.no,
        courier_no: this.courier_no,
        courier_img: this.courier_img,
        name: this.postInfo.name,
        mobile: this.postInfo.mobile,
        address: this.postInfo.province+this.postInfo.city+this.postInfo.address
      }
      devicePost(params).then((res) => {
        this.$notify({ type: 'success', message: '寄出成功' })
        setTimeout(()=>{
          this.$router.go(-1)
        },1000)
      }).catch((e) => { console.log(e) })
    },
    uploadimg(e) {
      this.courier_img = e
    },
    deleteimage() {
      this.courier_img = ''
    },
    copyInfo() {
      const url = this.postInfo.name + this.postInfo.mobile + this.postInfo.province+this.postInfo.city+this.postInfo.address
      let oInput = document.createElement('input')
      oInput.value = url
      document.body.appendChild(oInput)
      // oInput.style = 'display:none'
      oInput.select() // 选择对象;
      document.execCommand('Copy') // 执行浏览器复制命令
      this.$notify({
        message: '复制成功',
        type: 'success'
      })
      oInput.remove()
    },
    getMailInfo() {
      getPostInfo({no:this.no}).then((res) => {
        this.postInfo = res.data
      }).catch((e) => { })
    }
  }
}
</script>

<style scpoed>
.index-container{
  padding: 20px 15px;
}
.speedbtn{
  width: 250px;
  height: 40px;
  background: linear-gradient(135deg, #FF3737, #A82025);
  border-radius: 20px;
  margin: 0 auto;
  margin-top: 50px;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #FEFEFE;
  text-align: center;
  line-height: 40px;
}
.content-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 44px;
  background: #FFFFFF;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 15px;
  margin-bottom: 6px;
}
.content-item-left{
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #99A0A6;
}
.content-item-right{
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #000000;
}
.mail-title{
  margin-top: 14px;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #000000;
  margin-bottom: 14px;
}
.content-info{
  width: 100%;
  background: #FFFFFF;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 15px;
  margin-bottom: 17px;
}
.content-info-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.content-info-item-left{
  font-size: 13px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;
}
.content-info-item-right{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 13px;
  font-family: PingFang SC;
  font-weight: 400;
  text-decoration: underline;
  color: #A82025;
}
.content-info-item-right img{
  width: 15px;
  height: 15px;
  margin-right: 7.5px;
}
.mailimg{
  margin-bottom: 0px;
}
</style>
<style lang="scss">
html,body{
  width:100%;
  height:100%;
  background-color: #f4f4f4 ;
}
.content-item .van-field__control{
  text-align: right;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333;
}
.van-field__label{
  font-size:15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #99A0A6;
}
.van-cell{
  padding: 0;
}
</style>
